
<template>
  <div class="box">
    <div class="list" v-show="item.channel_info.name == '资深讲师'">
      <div class="top">
        <p>{{ item.channel_info.name }}</p>
      </div>
      <div
        class="list-item"
        v-for="(it, ind) in item.list"
        :key="ind"
        @click="goDetail(item.list[ind].teacher_id)"
      >
        <ul>
          <li>
            <img :src="it.teacher_avatar" alt="" />
            <div>
              <p>{{ it.teacher_name }}</p>
              <p class="two">{{ it.introduction }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="list1" v-show="item.channel_info.name == '推荐课程'">
      <div class="top">
        <p>{{ item.channel_info.name }}</p>
      </div>
      <div
        class="list-item"
        v-for="(it, ind) in item.list"
        :key="ind"
        @click="goDetail(item.list[ind].teacher_id)"
      >
        <ul>
          <li>
            <p>{{ it.title }}</p>
            <p style="color: #777777; font-size: 20px">共点击量</p>
            <img :src="it.cover_img" alt="" />
            <div class="but">
              <p style="color: #777777; font-size: 20px">{{ it.id }}人报名</p>
              <p style="font-size: 24px; color: #ff3c00">
                {{ it.underlined_price }}.00
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="list" v-show="item.channel_info.name == '名师'">
      <div class="top">
        <p>{{ item.channel_info.name }}</p>
      </div>
      <div
        class="list-item"
        v-for="(it, ind) in item.list"
        :key="ind"
        @click="goDetail(item.list[ind].teacher_id)"
      >
        <ul>
          <li>
            <img :src="it.teacher_avatar" alt="" />
            <div>
              <p>{{ it.teacher_name }}</p>
              <p class="two">{{ it.introduction }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  name: "",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    goDetail(id) {
      this.$router.push(`/teach?id=${id}`)
    },
  },
};
</script>
<style scoped lang='scss'>
.box {
  font-size: 18px;
  .list {
    padding: 0 10px;
    .top {
      border-left: 2px solid red;
      font-size: 24px;
      margin: 20px 0;
      p {
        margin-left: 5px;
      }
    }
    .list-item {
      height: 125px;
      ul {
        li {
          display: flex;
          height: 90px;
          align-items: center;
          font-size: 16px;
          background-color: #fff;
          margin-bottom: 7px;
          padding: 10px 16px;
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
          div {
            margin-left: 10px;
            .two {
              font-size: 14px;
              color: #999;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
  .list1 {
    font-size: 18px;
    padding: 0 10px;
    .top {
      border-left: 2px solid red;
      font-size: 24px;
      margin: 24px 0;
      p {
        margin-left: 5px;
      }
    }
    .list-item {
      ul {
        li {
          font-size: 25px;
          background-color: #fff;
          padding: 14px 23px;
          margin-bottom: 7px;
          img {
            width: 57px;
            height: 68px;
            margin: 20px 0;
          }
          .but {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>
